<template>
	<view class="running" :class="isBack ? 'running-back' : 'running'">
		<view class="up" v-show="isBack">
			
		</view>
		<view class="running-title">
			<text>户外跑</text>
			<text>运动中...</text>
		</view>
		<view class="running-metre">
			<text>{{distance}}</text>
			<text>KM</text>
		</view>
		<view class="running-gps">
			<text>GPS已打开</text>
			<view class="gps-signal">
				<text></text>
				<text></text>
				<text></text>
			</view>
			<image src="../../../static/image/homeimage/map.png" mode="" @click="mapclick"></image>
		</view>
		<view class="running-main">
			<view class="running-main-detail">
				<image src="../../../static/image/homeimage/run-speed.png" mode=""></image>
				<text>{{speed}}km/h</text>
				<view>
					<text>配速</text>
				</view>
			</view>
			<view class="running-main-detail">
				<image src="../../../static/image/homeimage/run-time.png" mode=""></image>
				<text>{{time}}</text>
				<view>
					<text>用时</text>
				</view>
			</view>
			<view class="running-main-detail">
				<image src="../../../static/image/homeimage/calories.png" mode=""></image>
				<text>1</text>
				<view>
					<text>配速</text>
				</view>
			</view>
		</view>
		<view class="running-foot">
			<view class="running-pause" v-if="this.isRun" :style="isBack ? 'background-color: #787878' : 'background-color: #fff'"> 
				<view  @click="$noMultipleClicks(running('pause'))">
					<image src="../../../static/image/homeimage/pause.png" mode="" ></image>
					<text>暂停</text>
				</view>
			</view>
			<view v-else class="button_container">
				<view class="running-start">	
					<view  @click="$noMultipleClicks(running('start'))">
						<image src="../../../static/image/homeimage/start.png" mode="" ></image>
						<text>开始</text>
					</view>
				</view>
				<view class="running-stop" v-if="!this.isStop">	
					<view  @longpress="running('stop')" @click="$noMultipleClicks(stopAlert())">
						<image src="../../../static/image/homeimage/stop.png" mode="" ></image>
						<text>停止</text>
					</view>
				</view>
			</view>
			<view v-if="this.isRun" class="lock">
				<view class="running-unlock" v-if="!this.isBack">
					<image src="../../../static/image/homeimage/lock.png" mode="" @click="lock"></image>
				</view>
				<view class="running-lock" v-else>
					<image src="../../../static/image/homeimage/lock.png" mode="" @longpress="lock" @click="unlock()"></image>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import homeApi from '../../../http/api/home.js'
	let startPoint = {
		latitude : '',
		longitude : ''
	}
	let stopPoint = {
		latitude : '',
		longitude : ''
	}
	export default {
		data() {
			return {
				/* 是否锁定的状态信息 */
				isBack: false,
				setMargin: "",
				/* 是否正在跑步的状态 */
				isRun:true,
				time:"00:00:00",
				timeInterval:"",
				distance: '0.00',
				speed:"0.00",
				/* 是否停止的状态 */
				isStop:false,
				noClick:true
			}
		},
		onBackPress() {
			return this.isBack
		}, 
		methods: {
			/* 锁定 */
			lock() {
				const that = this
				let title = that.isBack? '已解锁' : '已锁定'
				if (that.isBack) {
					uni.showModal({
						title: "解锁屏幕",
						content: "确定要解锁屏幕吗？",
						success(res) {
							if (res.confirm) {
								that.isBack = !that.isBack
								uni.showToast({
									title: title,
									duration: 1000,
									icon:'none'
								});
							}
						}
					})
				} else {
					that.isBack = !that.isBack
					uni.showToast({
						title: title,
						duration: 1000,
						icon:'none'
					});
				}
			},
			/* 解锁 */
			unlock(){
				uni.showToast({
					title:"请长按解锁!",
					duration:1500,
					icon:"none"
				})
			},
			center() {
				uni.getSystemInfo({
				    success: function (res) {
						this.setMargin = (res.windowWidth-40)/2-50;
				    }
				});
			},
			/* 地图页跳转 */
			mapclick(){
				uni.navigateTo({
					url:'../../running/runner/runner'
				})
			},
			/* 开始 暂停  停止跑步 */
			running(state){ 
				const that = this;
				if(state =="pause"){
					/* 调用index页面的暂停方法 */
					uni.$emit('pauseRunning',{msg:"pauseRunning"});
					setTimeout(() => {
						that.isRun = !that.isRun;
						that.stopDataCompute();
					},300)
				}else if(state == "start"){
					uni.getLocation({
						success(res) {
							startPoint.latitude = res.latitude.toFixed(6)
							startPoint.longitude = res.longitude.toFixed(6)
							/* 判断开始点是否在规定区域内 */
							// if(true){
							if(startPoint.longitude>114.894507&&startPoint.longitude<114.899074&&startPoint.latitude>25.774096&&startPoint.latitude<25.777591){
								/* 调用index界面的开始跑步方法 */
								that.$store.commit('saveStartPoint',startPoint);
								uni.$emit('running',{msg:"startRunning"});
								/* 判断规定时间 */
								homeApi.judgeTime().then(res => {
									let rweek = that.$store.state.rweek;
									if (res.data.code == 200) {
										let runningTimes = that.$store.state.runningTimes;
										if(runningTimes < rweek){
											that.isRun = !that.isRun;
											that.isStop = false;
											that.startDateCompute();
											console.log("保存第一个定位点" + startPoint);
										}
									}
								})
							}else{
								uni.showToast({
									icon:"none",
									title:"请在规定区域内跑步!",
									duration:2000
								})
							}
						}
					})
				}else{
					console.log(startPoint)
					/* 停止方法 */
					let hour = parseInt(that.time.substring(0,2));
					let minute = parseInt(that.time.substring(3,5));
					let totalMinute = hour*60 + minute;
					uni.getLocation({
						success(res) {
							stopPoint.latitude = res.latitude.toFixed(6)
							stopPoint.longitude =  res.longitude.toFixed(6)
							if(totalMinute<10){
								// if(false){
								uni.showToast({
									title: '跑步时间小于10分钟 无法提交',
									icon: 'none',
									duration: 1000
								})
							// }else if(true){
							}else if(stopPoint.longitude>114.894507&&stopPoint.longitude<114.899074&&stopPoint.latitude>25.774096&&stopPoint.latitude<25.777591){
								that.isStop = true;
								uni.$emit('stopRunning',{msg:"stopRunning"});
							}else{
								uni.showToast({
									title: '未在规定区域结束，无法提交',
									icon: 'none',
									duration: 1000
								})
							}
						},
						fail() {
							uni.showToast({
								title:'结束点获取失败 ，请重试',
								icon: 'none',
								duration:1000
							})
						}
					})
				}
			},
			stopAlert(){
				uni.showToast({
					title: '请长按结束跑步',
					duration: 2000,
					icon:'none',
				});
			},
			/* 数据计算方法  动态获取距离 时间 并计算速度 */
			dataCompute(){
				const that = this;
				that.time = that.$store.state.time;
				var distance = that.$store.state.distance;
				that.distance = (distance/1000).toFixed(2);
				var hour = that.time.substring(0,2);
				var minute = that.time.substring(3,5);
				var second = that.time.substring(6,8);
				var runTime = parseInt(hour)  +  parseInt(minute)/60  + parseInt(second)/3600 ;
				if(distance != 0){
					that.speed = ((distance/1000)/runTime).toFixed(2);
				};
				let Info = {
					time : that.time,
					distance : distance,
					speed : that.speed
				}
				uni.setStorage({
					key: "statisticInfo",
					data: Info,
				});
			},
			/* 停止数据计算 */
			stopDataCompute(){
				clearInterval(this.timeInterval);
			},
			/* 开始数据计算 */
			startDateCompute(){
				const that = this;
				that.timeInterval = setInterval(()=>{
					that.dataCompute();
				},1000);
			},
			changeState(){
				this.isRun = false;
				this.isStop = true;
			},
			unlocking(){
				this.isBack = false;
			}
		},
		onLoad() {
			this.center();
			// 保持屏幕常亮
			uni.setKeepScreenOn({
			    keepScreenOn: true
			});
			this.startDateCompute();
			this.lock();
			uni.$on('stopDataCompute',(msg)=>{
				this.stopDataCompute();
			});
			uni.$on('startDateCompute',(msg)=>{
				this.startDateCompute();
			});
			uni.$on('changeState',()=>{
				this.changeState();
			})
			uni.$on('unlocking',()=>{
				this.unlocking();
			})
		},
		beforeDestroy() {
			this.stopDataCompute();
		}
		
	}
</script>

<style>
	.running {
		width: 100%;
		height: 100%;
		padding: 40px 20px;
		color: #FFFFFF;
		background-color: #584F60;
	}
	.running-back {
		width: 100%;
		height: 100%;
		padding: 40px 20px;
		color: #474747 !important;
		background-color: #000000;
	}
	.running-title {
		width: 100%;
		height: 40px;
	}
	.running-title>text:nth-child(1) {
		display: block;
		color: #9e98a4;
		font-size: 14px;
	}
	.running-title>text:nth-child(2) {
		display: block;
		margin-top: 2px;
		font-size: 16px;
	}
	.running-metre {
		width: 100%;
		height: 180px;
		line-height: 180px;
		margin: 10px auto;
		font-size: 70px;
		text-align: center;
		font-family: "myImpact";
	}
	.running-metre>text:nth-child(1) {
		display: inline-block;
		font-weight: 500;
		letter-spacing: 2px;
		transform: scale(1,1.5);
	}
	.running-metre>text:nth-child(2) {
		position: relative;
		bottom: -10px;
		display: inline-block;
		margin-left: 10px;
		line-height: 240px;
		font-size: 14px;
		transform: scale(1,1.5);
	}
	.running-gps {
		width: 100%;
		height: 50px;
		line-height: 50px;
		margin: 20px auto;
	}
	.running-gps>text {
		display: block;
		float: left;
		font-size: 16px;
		color: #9e98a4;
	}
	.gps-signal {
		float: left;
		width: 50px;
		height: 50px;
		line-height: 50px;
	}
	.gps-signal>text {
		display: block;
		float: left;
		width: 5px;
		height: 5px;
		margin-top: 25px;
		margin-left: 5px;
		background-color: #0EA391;
		border-radius: 50%;
	}
	.running-gps>image {
		display: block;
		float: right;
		width: 50px;
		height: 50px;
		opacity: .8;
	}
	.running-main {
		display: flex;
		width: 100%;
		height: 120px;
		font-family: "myImpact";
		margin-top: 50px;
	}
	.running-main>view {
		flex: 1;
		text-align: center;
	}
	.running-foot {
		width: 100%;
		height: 120px;
		margin-top: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.running-pause {
		width: 100px;
		height: 100px;
		margin-left: 90px;
		border-radius: 50%;
		background-color: #FFFFFF;
		justify-content: center; 
		display: flex;
		align-items: center;
	}
	.running-pause>view>image{
		display: block;
		width: 33px;
		height: 33px;
		margin: auto;
		margin-top: 8px;
	}
	.running-pause>view>text{
		color: #584F60;
		width: 100%;
		display: block;
		text-align: center;
		font-size: 18px;
	}
	.running-start {
		width: 100px;
		height: 100px;
		/* margin-left: 40px; */
		border-radius: 50%;
		background-color: #6fc8aa;
		justify-content: center; 
		display: flex;
		align-items: center;
	}
	.running-start>view>image{
		display: block;
		width: 23px;
		height: 23px;
		margin: auto;
		margin-top: 8px;
	}
	.running-start>view>text{
		color: #ffffff;
		width: 100%;
		margin-top: 5px;
		display: block;
		text-align: center;
		font-size: 18px;
	}
	.running-stop {
		width: 100px;
		height: 100px;
		margin-left: 50px;
		border-radius: 50%;
		background-color: #fe5363;
		justify-content: center; 
		display: flex;
		align-items: center;
	}
	.running-stop>view>image{
		display: block;
		width: 23px;
		height: 23px;
		margin: auto;
		margin-top: 8px;
	}
	.running-stop>view>text{
		color: #ffffff;
		width: 100%;
		margin-top: 5px;
		display: block;
		text-align: center;
		font-size: 18px;
	}
	.running-main-detail>text{
		display: block;
		margin-top:8px;
		width: 100%;
	}
	.running-main-detail>image{
		display: block;
		width: 33px;
		height: 33px;
		opacity: .8;
		margin: auto;
		margin-top: 8px;
	}
	.running-main-detail>view>text{
		display: block;
		margin-top:8px;
		width: 100%;
		font-size: 18px;
	}
	.running-unlock{
		margin-left: 40px;
		width: 80px;
		height: 80px;
		border-radius: 50%;
		background-color:  #4e4958;
		border: #DDDDDD solid 0.3px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.running-lock{
		margin-left: 40px;
		width: 80px;
		height: 80px;
		border-radius: 50%;
		background-color:  #438ad0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.running-lock>image{
		width: 25px;
		height: 25px;
		
	}
	.running-unlock>image{
		width: 25px;
		height: 25px;
		
	}
	.button_container{
		width: 300px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.button-container>view{
		flex: 1;
	}
	.up {
		position: absolute;
		top: 0;
		width: 100%;
		height: 90%;
		z-index: 666;
	}
	
	.lock {
		z-index: 667;
	}

</style>
